
import React, { useState, useEffect } from 'react';
import { Modal, Form, Input } from 'antd';
// import TreeComponent from '@/components/companyTree'
import api from '@/api/apiList';
const { TextArea } = Input;
const AddRoleDialog = (props) => {
    const [form] = Form.useForm();
    const [state, setState] = useState({
        dialogAddVisible: props.dialogAddVisible,
        erpOptions: [],
        initialValues: {
            name: props.name || undefined,
            roleId: props.roleId || undefined,
            description: props.description || undefined
        }
    })
    useEffect(() => {
        let didUnmounted = false;
        if (didUnmounted) return
        const getTreeData = async () => {
            try {
                let res = await api.common.departmentCombobox()
                setState({
                    erpOptions: res.result,
                    dialogAddVisible: props.dialogAddVisible
                })
            } catch (error) {
                console.log(error);
            }
        }
        getTreeData()
        form.setFieldsValue({
            name: props.name || undefined,
            roleId: props.roleId || undefined,
            description: props.description || undefined
        })
        return () => {
            didUnmounted = true
        }
    }, [props, form])
    const onFinish = () => {
        form
            .validateFields()
            .then((values) => {
                setAddDialog()
                props.setAddDialog(values)
            })
            .catch((info) => {
                console.log('Validate Failed:', info);
            });
    }
    const setAddDialog = () => {
        setState({ ...state, dialogAddVisible: false })
    }
    const { dialogAddVisible, initialValues = {} } = state
    return <Modal
        maskClosable={false}
        centered
        title={`${props.roleId ? '编辑' : '新增'}角色`}
        width={500}
        wrapClassName="yzh-modal"
        visible={dialogAddVisible}
        onOk={onFinish}
        afterClose={() => {
            form.resetFields();
            props.setAddDialog()
        }}
        onCancel={setAddDialog}>
        <Form
            name="basic"
            form={form}
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 20 }}
            initialValues={initialValues}
            autoComplete="off"
        >
            <Form.Item
                label="角色名称"
                name="name"
                rules={[{ required: true, message: '请填写角色名称' }]}
            >
                <Input maxLength={20} placeholder="请填写角色名称" />
            </Form.Item>
            <Form.Item
                label="角色介绍"
                name="description"
                rules={[{ required: false, message: '请输入角色介绍' }]}
            >
                <TextArea placeholder="请填写角色介绍" showCount maxLength={100} />
            </Form.Item>
        </Form>
    </Modal>
}

export default AddRoleDialog;